<template>
  <div v-if="formData" class="home-container">
    <!-- <div class="header">兴化市蟹有源溯源平台</div> -->
    <div class="cover">
      <img src="../../assets/image/banner.png" alt="" />
      <div class="code-wrap">
        <div class="code-name">
          您查询的溯源编号为:
        </div>
        <div class="code">
          {{ formData.suyuanma }}
        </div>
        <div class="icon">
          <img src="../../assets/image/挂钩(1).png" alt="">
          <img src="../../assets/image/挂钩(1).png" alt="">
          <img src="../../assets/image/挂钩(1).png" alt="">
          <img src="../../assets/image/挂钩(1).png" alt="">
        </div>
      </div>
    </div>
    <div class="tab-wrap">
      <van-tabs @click-tab="onClickTab" color="#46cf89" v-model:active="active">
        <van-tab title="溯源信息">
          <div class="content-container">
            <div class="c-header">
              <img class="l-title" src="../../assets/image/Group 1788.png" alt="">
              <img class="bgp" src="../../assets/image/Slice 1.png" alt="">
              <div class="driver"></div>
              <!-- <img src="../../assets/image/Group 1788.png" alt="">
              <div class="clrice1"></div>
              <div class="clrice2"></div> -->
            </div>
            <div class="baseinfo">
              <van-steps v-if="suYuanDtos.length > 0" active-icon="location-o" active-color="#19B51C"
                direction="vertical" :active="0">
                <van-step v-for="(item, index) in suYuanDtos" :key="index">

                  <div class="s-name">{{ item.ltName }}</div>
                  <div class="cell" v-if="item.rkDate">
                    <span class="label"> 入库时间:</span>
                    {{ item.rkDate }}
                  </div>
                  <div class="cell" v-if="item.ckDate">
                    <span class="label"> 出库时间:</span>
                    {{ item.ckDate }}
                  </div>
                  <div class="cell" v-if="item.ycljcDate">
                    <span class="label"> 原材料检测时间:</span>
                    {{ item.ycljcDate }}
                  </div>
                  <div class="cell" v-if="item.cpjcDate">
                    <span class="label"> 成品检测上传时间:</span>
                    {{ item.cpjcDate }}
                  </div>
                </van-step>
              </van-steps>
              <van-empty v-else image="error" description="描述文字" />
              <div class="hgz" v-if="cardData">
                <div class="conformity">承诺达标合格证：</div>
                <div class="card">
                  <div class="certification_left">
                    <div class="certification_title">承诺达标合格证</div>
                    <div class="certification_desc">
                      商品名称: {{ cardData.name }}
                    </div>
                    <div class="certification_desc">
                      重&#8194;&#8194;&#8194;&#8194;量: {{ cardData.sysum }}千克
                    </div>
                    <div class="certification_desc">
                      产&#8194;&#8194;&#8194;&#8194;地:
                      {{ cardData.comeaddress }}
                    </div>
                    <div class="certification_desc">
                      开具单位: {{ cardData.ytmarketnm }}
                    </div>
                    <div class="certification_desc">
                      联系方式: {{ cardData.jyhphone }}
                    </div>
                    <div class="certification_desc">
                      开具日期: {{ cardData.kjTimeStr }}
                    </div>
                    <qrcode-vue class="qrcode" :value="qrcodeUrl" :size="70" level="H" />
                  </div>
                  <div class="certification_right">
                    <div class="promotion_title">我承诺对生产销售的食用农产品:</div>
                    <div class="promotion_desc1" v-bind:key="index" v-for="(item, index) in promotionList">
                      <img class="promotion_left" src="../../assets/image/yes_certicifate.png" />
                      {{ item.name }}
                    </div>

                    <div class="promotion_title" style="margin-top: 10px">
                      承诺依据
                    </div>
                    <div class="promotion_desc" v-bind:key="index" v-for="(item, index) in promotionReason">
                      <img class="promotion_left" v-if="selectedReason == index"
                        src="../../assets/image/yes_certicifate.png" />
                      <img class="promotion_left_unselect" v-if="selectedReason != index"
                        src="../../assets/image/no_certicifate.png" />
                      {{ item.name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="质检信息">
          <div v-for="(item, index) in zhiJianDtos" :key="index">
            <children :tableInfo="item"></children>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="strick strick1" @click="handleRegister">
      <img src="../../assets/image/Group 525.png" alt="" />
      购买登记
    </div>
    <div class="strick strick2" @click="handleComplaints">
      <img src="../../assets/image/客服.png" alt="" />

      咨询投诉
    </div>
  </div>
  <div v-else class="loading">
    <img src="../../assets/image/file .gif" alt="">
  </div>
</template>

<script setup>
import children from './children/index.vue'
import { ref } from "vue";
import {
  getXYYCodeByJhId,
  getHGZ,
  queryPromotions,
  queryPromotion1,
} from "../../apis/home";
import { useRouter } from "vue-router";
import QrcodeVue from "qrcode.vue";
const formData = ref();
const active = ref(0);
const cardData = ref();
const suYuanDtos = ref([]);
const zhiJianDtos = ref([]);
const router = useRouter();
const conformity = ref();
const qrcodeUrl = ref();
const promotionReason = ref([]);
const promotionList = ref([]);
const selectedReason = ref();
const iswx = ref();
const getInfo = async () => {
  // var ua = window.navigator.userAgent.toLowerCase();
  // console.log(ua);

  // if (ua.match(/MicroMessenger/i) == "micromessenger") {
  //   //return true
  //   console.log("66666");
  //   iswx.value = true;
  // } else {
  //   iswx.value = false;
  // }

  await queryPromotions().then((res) => {
    if (res.code == 0) {
      promotionList.value = res.data;
    }
  });
  await queryPromotion1().then((res) => {
    if (res.code == 0) {
      promotionReason.value = res.data;
    }
  });
  await getXYYCodeByJhId().then((res) => {
    if (res.code == 500) {
      localStorage.clear()
      return router.push("/error");
    }
    formData.value = res.data;
    localStorage.setItem("formData", JSON.stringify(res.data));
    suYuanDtos.value = res.data.suYuanDtos.reverse();
    zhiJianDtos.value = res.data.zhiJianDtos;
  });
  await getHGZ().then((res) => {
    conformity.value = res.data.hgzbh;
    cardData.value = res.data;
    qrcodeUrl.value =
      "https://newh5qct.yskjtz.com/#/pages/checkcertification/checkcertification?id=" +
      res.data.id;
    if (res.data.zkfsnm == "自主承诺") {
      selectedReason.value = 0;
    } else if (res.data.zkfsnm == "企业自检") {
      selectedReason.value = 1;
    } else {
      selectedReason.value = 2;
    }
  });
};
getInfo();

const onClickTab = (item) => {
  active.value = item.name;
};
const imgClick = () => {
  showImagePreview([formData.value.img]);
};
const handleRegister = () => {
  router.push("/register");
};
const handleComplaints = () => {
  router.push("/complaints");
};
</script>

<style lang="scss" scoped>
.home-container {
  background-color: #d9f2f7;

  .header {
    background-color: #46cf89;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 20px;
  }

  .title {
    height: 40px;
    text-align: center;
    font-size: 25px;
    color: #46cf89;
    font-weight: 600;
    font-family: serif;
  }

  .cover {
    height: 258px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }

    .code-wrap {
      position: absolute;
      top: 132px;
      left: 24px;

      .code-name {
        width: 150px;
        height: 19px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 16px;
        letter-spacing: 2px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        background: #1CCB1F;
        padding: 8px;
        border-radius: 6px;
      }

      .code {
        width: 214px;
        height: 22px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 19px;
        letter-spacing: 1px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        background-color: #fff;
        padding: 10px;
        border-radius: 6px;
        margin-top: 6px;
        font-weight: 600;
      }

      .icon {
        position: absolute;
        top: 29px;
        width: 166px;
        display: flex;
        justify-content: space-around;

        img {
          width: 5px;
          height: 17px;
        }
      }
    }
  }

  :deep(.tab-wrap) {
    .van-tabs__wrap {
      height: 49px;
      padding-bottom: 5px;
      border-bottom: 1px solid #D3D3D3;

      .van-tab__text {
        font-family: PingFang SC, PingFang SC;
        font-size: 17px;
        line-height: 20px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      // border-radius: 15px;
      .van-tab--active {
        .van-tab__text {
          font-family: PingFang SC, PingFang SC;
          font-size: 17px;
          color: #19B51C;
          line-height: 20px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }

      }

      .van-tabs__line {
        width: 68px;
      }
    }

    .van-tabs__content {
      min-height: calc(100vh - 326px);
      background: #EBFFEC;
      padding: 12px 13px 0 13px;

      .content-container {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        // padding: 12px;
        // background-color: #fff;
        border-radius: 12px;
        // border-bottom-left-radius: 12px;
        // border-bottom-right-radius: 12px;
        // box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

        .c-header {
          width: 101.5%;
          height: 60px;
          position: relative;
          display: flex;
          justify-content: center;

          .l-title {
            top: 10px;
            position: absolute;
            width: 97px;
            height: 30px;
          }

          .bgp {
            width: 100%;
            height: 100%;
          }

          .driver {
            bottom: 8px;
            width: 93%;
            position: absolute;
            border-bottom: 1px dashed #D3D3D3;
          }

          .clrice1 {
            position: absolute;
            left: -19px;
            bottom: -8px;
            width: 17px;
            height: 17px;
            background-color: #EBFFEC;
            border-radius: 50%;
          }

          .clrice2 {
            z-index: 22;
            position: absolute;
            right: -19px;
            bottom: -8px;
            width: 17px;
            height: 17px;
            background-color: #EBFFEC;
            border-radius: 50%;
          }
        }

        .baseinfo {
          width: 100%;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 4px;
          margin-bottom: 20px;
          border-bottom-left-radius: 12px;
          border-bottom-right-radius: 12px;

          .van-steps {
            // border-bottom-left-radius: 12px;
            // border-bottom-right-radius: 12px;
          }

          .van-step__icon--active {
            font-size: 20px;
          }

          // padding: 10px 15px;
          .s-name {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 17px;
            color: #19B51C;
            letter-spacing: 1px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }

          .cell {
            margin-top: 6px;
            display: flex;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 13px;
            color: #999999;
            font-style: normal;
            text-transform: none;
            justify-content: space-between;

            span {
              display: inline-block;
              letter-spacing: 1px;
            }

            .label {
              width: 130px;
            }
          }

          .hgz {
            background-color: #fff;
            padding: 10px;
            padding-bottom: 30px;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
          }
        }

      }

      .content-container1 {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        border-radius: 12px;

        .c-header {
          width: 101.5%;
          height: 60px;
          position: relative;
          display: flex;
          justify-content: center;

          .l-title {
            top: 10px;
            position: absolute;
            width: 159px;
            height: 30px;
          }

          .bgp {
            width: 100%;
            height: 100%;
          }

          .driver {
            bottom: 8px;
            width: 93%;
            position: absolute;
            border-bottom: 1px dashed #D3D3D3;
          }
        }

        .baseinfo {
          width: 100%;
          height: 400px;
          background-color: #fff;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 4px;
          margin-bottom: 20px;
          border-bottom-left-radius: 12px;
          border-bottom-right-radius: 12px;
        }

      }

    }

    .conformity {
      padding: 10px 0;
      font-family: PingFang SC, PingFang SC;
      font-weight: 550;
      font-size: 16px;
      color: #333333;
      line-height: 19px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .card {
      padding: 10px;
      display: flex;
      background-color: #76bc29;
      border-radius: 20px;

      .certification_left {
        padding: 8px;
        // font-size: 12px;
        font-size: 0.8em;
        width: 62%;
        background-image: url("../../assets/image/certicifate_bg.png");
        background-size: 100% 100%;
        background-position: cernter 20px;
        position: relative;
        display: flex;
        flex-direction: column;

        .certification_title {
          font-size: 16px;
          font-weight: 600;
        }

        .qrcode {
          position: absolute;
          top: 10%;
          right: 10%;
        }
      }

      .certification_right {
        img {
          width: 10px;
        }

        font-size: 8px;
        margin-left: 5px;
        width: 32%;

        .promotion_title {
          color: #fff;
          font-size: 12px;
        }

        .promotion_desc {
          display: flex;
          align-items: center;

          img {
            margin-right: 3px;
          }
        }

        .promotion_desc1 {
          img {
            position: relative;
            top: 2px;
          }
        }
      }
    }

  }

  .zhijian {
    .cell1 {
      font-size: 13px;

      .name {
        display: inline-block;
        color: #828683;
        width: 80px;
        text-align: right;
      }

      .c-name {
        margin-left: 15px;
        color: #59dc89;
      }
    }
  }

  .strick1 {
    width: 55px;
    height: 55px;
    background: linear-gradient(180deg, #88DF8A 0%, #3E9440 100%);
    box-shadow: 0px 1 5px 1px rgba(96, 179, 98, 0.4);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #fff;
    position: fixed;
    right: 8px;
    bottom: 220px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    img {
      margin-bottom: 3px;
      width: 23px;
    }
  }

  .strick2 {
    width: 55px;
    height: 55px;
    background: #FFFFFF;
    box-shadow: 0px 1 5px 1px rgba(96, 179, 98, 0.4);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #19B51C;
    position: fixed;
    right: 8px;
    bottom: 140px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

    img {
      width: 23px;
    }
  }
}

.loading {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
  }
}
</style>